<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css
        书写三角
    </title>
    <style>
        div {
            /* 1 子绝父相 */
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid #000;
        }
        /* 2 ::after是行内元素 给宽度是需要转换元素的这里因为有定位则同理 */
         div::after {
             /* 3 conten:"";为伪元素必写属性里面不跟内容也必须写上 */
             content: "";
             /* 4 子绝 */
             position: absolute;
             /* 5 边偏移的位置通过浏览器调试 */
             top: 8px;
             right: 15px;
             width: 10px;
             height: 10px;
             /* 6 给了对应三角的边框 然后旋转就有了 */
             border-right: 1px solid #000;
             border-bottom: 1px solid
              #000;
              
              transform: rotate(45deg);
              /* 8 最后加一个过渡就非常的完美实现 */
              transition: all .2s;
         }
         /* 7 鼠标经过div  让里面的是三角旋转 225deg 是因为本身是45deg 目标旋转180deg相加得出 */
         div:hover::after {
             transform: rotate(225deg);
         }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>